import React, { useContext } from 'react';
import { Modal, Descriptions, Button } from 'antd';
import moment from 'moment';
import { UserContext } from '@/layouts/UserProvider';

const EntryDetail = ({ modalVisible, onCancel, data, selectStatus, onSelect, onCheck }) => {
  const userCtx = useContext(UserContext);
  const permits = userCtx.userPermits;

  return (
    <Modal
      destroyOnClose
      title="任务预约详情"
      visible={modalVisible}
      onCancel={() => onCancel()}
      footer={
        selectStatus ? (
          <Button
            key="back"
            type="primary"
            onClick={() => {
              onCancel();
              onSelect(
                {
                  ...data,
                  status: 1,
                  id: data.car_appointment_id,
                  dateTime: [moment(data.start_time), moment(data.end_time)],
                },
                'update',
              );
            }}
            visible="false"
            // htmlType="submit"
          >
            编辑
          </Button>
        ) : (
          [
            <Button
              key="back"
              type="primary"
              onClick={() => {
                onCancel();
                onSelect(
                  {
                    ...data,
                    status: 1,
                    id: data.car_appointment_id,
                    dateTime: [moment(data.start_time), moment(data.end_time)],
                  },
                  'update',
                );
              }}
              visible="false"
              // htmlType="submit"
            >
              编辑
            </Button>,
            (permits.includes('verifyTask') && ['1', '4'].includes(String(userCtx.userInfo?.type)) && <Button
              key="back"
              type="primary"
              onClick={() => {
                onCancel();
                onCheck({ id: data.car_appointment_id, status: 3 });
              }}
            >
              取消
            </Button>),
            (permits.includes('verifyTask') && ['1', '4'].includes(String(userCtx.userInfo?.type)) && <Button
              key="back"
              type="primary"
              onClick={() => {
                onCancel();
                onCheck({ id: data.car_appointment_id, status: 2 });
              }}
            >
              确认
            </Button>),
          ]
        )
      }
    >
      <Descriptions column={1} labelStyle={{ width: 120, justifyContent: 'flex-end' }}>
        <Descriptions.Item label="车辆">{data.card}</Descriptions.Item>
        <Descriptions.Item label="时间">{`${moment(data.start_time).format(
          'YYYY-MM-DD HH:mm:ss',
        )}-${moment(data.end_time).format('YYYY-MM-DD HH:mm:ss')}`}</Descriptions.Item>
        <Descriptions.Item label="预约人">{data.creatorName}</Descriptions.Item>
        <Descriptions.Item label="司机">{data.driverName}</Descriptions.Item>
        <Descriptions.Item label="测试人员">{data.testorName}</Descriptions.Item>
        <Descriptions.Item label="任务标签">{data.taskTagName}</Descriptions.Item>
        <Descriptions.Item label="任务内容">{data.content}</Descriptions.Item>
      </Descriptions>
    </Modal>
  );
};

export default EntryDetail;
